import React, { Component } from 'react';
import moment from 'moment';
import { Form, Input, message, Modal } from 'antd';
import { maxLength } from '@/utils/form';
import { REGION_ADDRESS_TYPE, REGION_TYPE } from '@/Constants';
import { FULL_NAME_RULE, EMAIL_RULE, CODE_RULE, MOBILE_RULE } from '@/Constants/rules';
import api from '@/api';

const FormItem = Form.Item;
const { TextArea, Search } = Input;

@Form.create()
class CreateUserForm extends Component {
  handleInput = e => {
    let val = e.target.value;
    val = val.trim();
    val = val.substr(0, 30);
    e.target.value = val;
  };
  checkCode = (rule, value = '', callback) => {
    if (value == '') {
      return callback();
    }
    let payload = {
      [rule.field]: value,
    };
    api.user.userManage
      .checkCode({
        queryParams: payload,
      })
      .then(res => {
        if (!res.data) {
          callback(rule.message);
        } else {
          callback();
        }
      });
  };

  render() {
    const { modalVisible, form, handleAdd, handleAddModalVisible, loading = false } = this.props;
    const okHandle = () => {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        const fullName = fieldsValue.fullName.trim();
        handleAdd({
          ...fieldsValue,
          fullName,
        });
        form.resetFields();
      });
    };
    return (
      <Modal
        maskClosable={false}
        keyboard={false}
        destroyOnClose
        title="添加用户"
        visible={modalVisible}
        confirmLoading={loading}
        onOk={okHandle}
        onCancel={() => handleAddModalVisible()}
      >
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="账号">
          {form.getFieldDecorator('userName', {
            rules: [
              { required: true, message: '请输入账号', whitespace: true },
              { pattern: CODE_RULE.PATTERN, message: CODE_RULE.MESSAGE },
              { validator: this.checkCode, message: '账号已存在' },
            ],
            validateTrigger: 'onBlur',
          })(<Input maxLength={15} />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="姓名">
          {form.getFieldDecorator('fullName', {
            rules: [
              { required: true, message: '请输入姓名', whitespace: true },
              { pattern: FULL_NAME_RULE.PATTERN, message: FULL_NAME_RULE.MESSAGE },
            ],
          })(<Input maxLength={30} onBlur={e => this.handleInput(e)} />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="手机">
          {form.getFieldDecorator('mobilePhone', {
            rules: [
              { required: true, message: '请输入手机号码' },
              { pattern: MOBILE_RULE.PATTERN, message: MOBILE_RULE.MESSAGE },
              { validator: this.checkCode, message: '手机已存在' },
            ],
            validateTrigger: 'onBlur',
          })(<Input maxLength={11} />)}
        </FormItem>

        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="邮箱">
          {form.getFieldDecorator('email', {
            rules: [
              { required: true, message: '请输入邮箱地址', whitespace: true },
              { type: 'email', message: '请输入正确的邮箱地址' },
              { validator: this.checkCode, message: '邮箱已存在' },
            ],
            validateTrigger: 'onBlur',
          })(<Input maxLength={100} />)}
        </FormItem>
      </Modal>
    );
  }
}

export default CreateUserForm;
